<template>
	<view class="container">
		<view class="head_box">
			<view style="color: #999999;font-size: 13px;">提现至</view>
			<view style="display: flex;">
				<image src="../../static/img/mine/constract_wx.png" mode="" style="width: 24px;height: 24px;border-radius: 12px;margin-top: 16px;"></image>
				<view style="padding-top: 17px;margin-left: 12px;">微信钱包</view>
			</view>
		</view>
		<view class="body_box">
			<view style="color: #999999;font-size: 13px;margin-bottom: 20px;">提现金额</view>
			<view style="display: flex;justify-content: center;align-items: center;">
				<span style="font-size: 32px;font-weight: 800;display: inline-block;font-family: PingFang SC;">¥</span>
				<input style="margin-left:22px;font-size: 42px;height: 100%;" type="digit" maxlength="8" auto-focus v-model="out_money"
				 @input="checkMoeny">
			</view>
			<view style="height: 1px;background-color: #EBEBEB;margin-bottom: 8px;"></view>
			<view class="balance_b">
				可用余额 {{canbeused_money ||"---"}}元 <span style="color: #0AC770;margin-left: 8px;" @tap="full_money">全部提现</span>
			</view>
			<button v-if="!isCheck" disabled="disabled" class="btn_disabled"> 申请提现</button>
			<button v-else class="btn_sure" @tap="tohandle"> 申请提现</button>
		</view>
		<uni-popup :show="false" type="center" ref="cash_out_popup">
			<view style="background-color: #FFFFFF;padding: 20px 20px;display: flex;justify-content: center;flex-direction: column;border-radius: 16px;align-items: center;">
				<view class="">
					<image v-if="cash_status" style="width: 120px;height: 120px;" src="../../static/img/setting/csuccess.png" mode=""></image>
					<image v-else style="width: 120px;height: 120px;" src="../../static/img/withdraw_details/fail.png" mode=""></image>
				</view>

				<view v-if="cash_status" style="font-size: 17px;color: #333333;font-weight: bold;">
					申请成功
				</view>
				<view v-else style="font-size: 17px;color:#333333 ;font-weight: bold;">
					申请失败
				</view>
				<view v-if="cash_status" style="margin-top: 10px;text-align: center;color: #999999;font-size: 13px;">你已发起提现申请,请耐心的等待后台审核</view>
				<view v-else style="margin-top: 10px;text-align: center;color: #999999;font-size: 13px;">您的微信账户存在异常</br>请联系客服400-1788-790获取帮助</view>
				<view style="border-top: 1px solid ##EEEEEE;width: 100%;padding-top: 10px;">
					<view class="signBtn" @tap="closePop">完成</view>
				</view>

				<!-- 签到 -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
	import {
		get_account,
		cash
	} from "../../api/user.js"
	export default {

		data() {
			return {
				canbeused_money: "",
				out_money: "",
				cash_status: true,
				account_balance: '',
				cumulative: '',
				recent: '',
				isCheck: false
			};
		},
		onShow: function() {
			this.get_mine_account()
		},
		onLoad(option) {
			this.canbeused_money = option.account_balance
			console.log(option)
		},
		methods: {
			checkMoeny() {
				if (Number(this.out_money) > Number(this.canbeused_money)) {
					this.isCheck = false
				} else {
					this.isCheck = true
				}
			},
			full_money() {
				this.out_money = this.canbeused_money
				uni.navigateTo({
					url: "/pages/withdraw_details/index"
				})
				// this.$refs.cash_out_popup.open()
			},
			get_mine_account() {
				if (this.token = uni.getStorageSync('authorization')) {
					get_account().then(res => {
						this.account_balance = res.data.amount
						this.cumulative = res.data.cumulative
						this.recent = res.data.recent
					})
				} else {
					uni.showModal({
						title: "职小侠提醒",
						content: '用户已登出，请重新登录！',
						success: (res) => {
							if (res.confirm) {
								// let showT = true
								uni.navigateTo({
									url: "/pages/login/index"
								});
							}
						}
					})
					return;
				}
			},
			closePop() {
				this.$refs.cash_out_popup.close(),
					this.out_money = null

			},
			tohandle() {
				if (this.out_money) {
					cash({
						total_account: this.canbeused_money * 100,
						pay_account: this.out_money * 100
					}).then(res => {
						if (res.code === 20000) {
							// uni.showToast({
							// 	icon:'none',
							// title:'提现成功'
							// })
							this.$refs.cash_out_popup.open()
							this.canbeused_money = this.canbeused_money - this.out_money
						}
					})
				}else {
					uni.showToast({
						icon:'none',
						title:'请选填写要提现的金额'
					})
				}
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 16px;
	}

	.head_box {
		background-color: #FFFFFF;
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 16px;
	}

	.body_box {
		background-color: #FFFFFF;
		padding: 16px;
		border-radius: 8px;
	}

	.balance_b {

		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 18px;
		color: #999999;
		opacity: 1;
		margin-bottom: 22px;
	}

	.signBtn {
		border-top: 1px solid #EEEEEE;
		padding-top: 10px;
		font-size: 18px;
		text-align: center;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 19px;
		color: #0AC770;
		opacity: 1;

	}

	.btn_sure {
		color: #FFFFFF;
		;
		background-color: #0AC770;
	}
</style>
